<template>
	<view class="foundation-org">
		<!-- 顶部导航栏 -->
		<tn-nav-bar fixed :isBack="true" backgroundColor="#ffffff" :bottomShadow="false" @click-back="navigateBack"
			backIconColor="#ffffff">
			<text slot="title" style="color: #ffffff; font-size: 36rpx;">教育基金会领导机构</text>
		</tn-nav-bar>

		<view class="content-container">
			<!-- 机构介绍头部 -->
			<view class="org-header">
				<!-- 可根据实际情况保留或删除logo -->
				<image src="/static/foundation-logo.png" mode="widthFix" class="org-logo" v-if="false"></image>
				<text class="org-title">吉林农业科技学院教育基金会</text>
				<text class="org-desc">基金会领导机构成员名单</text>
			</view>

			<!-- 领导机构成员列表 -->
			<view class="org-members">
				<!-- 理事长 -->
				<view class="member-section">
					<view class="section-title">
						<text class="title-text">一、理事长</text>
						<view class="title-line"></view>
					</view>
					<view class="member-list">
						<view class="member-item" :key="1">
							<view class="member-info">
								<text class="member-name">沈宪文</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 副理事长 -->
				<view class="member-section">
					<view class="section-title">
						<text class="title-text">二、副理事长（按照姓氏笔画）</text>
						<view class="title-line"></view>
					</view>
					<view class="member-list">
						<view class="member-item" v-for="(member, index) in viceChairmen" :key="index">
							<view class="member-index">{{ index + 1 }}</view>
							<view class="member-info">
								<text class="member-name">{{ member }}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 秘书长 -->
				<view class="member-section">
					<view class="section-title">
						<text class="title-text">三、秘书长</text>
						<view class="title-line"></view>
					</view>
					<view class="member-list">
						<view class="member-item" :key="1">
							<view class="member-info">
								<text class="member-name">丁喜胜</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 理事会成员 -->
				<view class="member-section">
					<view class="section-title">
						<text class="title-text">四、理事会成员（按照姓氏笔画）</text>
						<view class="title-line"></view>
					</view>
					<view class="member-list grid-list">
						<view class="member-item grid-item" v-for="(member, index) in councilMembers" :key="index">
							<view class="member-index">{{ index + 1 }}</view>
							<view class="member-info">
								<text class="member-name">{{ member }}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 监事 -->
				<view class="member-section">
					<view class="section-title">
						<text class="title-text">五、监事（按照姓氏笔画）</text>
						<view class="title-line"></view>
					</view>
					<view class="member-list">
						<view class="member-item" v-for="(member, index) in supervisors" :key="index">
							<view class="member-index">{{ index + 1 }}</view>
							<view class="member-info">
								<text class="member-name">{{ member }}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 副秘书长 -->
				<view class="member-section">
					<view class="section-title">
						<text class="title-text">六、副秘书长</text>
						<view class="title-line"></view>
					</view>
					<view class="member-list">
						<view class="member-item" :key="1">
							<view class="member-info">
								<text class="member-name">李 成</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 副理事长列表
				viceChairmen: [
					'王伟华', '刘启锋', '关中生', '孙玉忠',
					'宋松林', '徐健博', '薛宝君'
				],
				// 理事会成员列表
				councilMembers: [
					'丁喜胜', '马 辉', '王伟华', '王喜来',
					'王金山', '牛 伟', '刘启锋', '关中生',
					'孙玉忠', '李晓成', '沈宪文', '宋松林',
					'陈世纪', '陈 凯', '修立福', '徐建博',
					'薛宝君'
				],
				// 监事列表
				supervisors: [
					'王凤文', '钟大辉', '袁凤明'
				]
			};
		},
		methods: {
			// 返回上一页
			navigateBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.foundation-org {
		background-color: #f5f7fa;
		min-height: 100vh;
		/* 减少顶部留白（原83rpx） */
		padding-top: 83rpx; 
	}

	.content-container {
		/* 减少容器内边距（原30rpx） */
		padding: 20rpx 30rpx; 
	}

	// 机构头部样式
	.org-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 减少头部内边距（原40rpx 0） */
		padding: 20rpx 0 15rpx; 
		background-color: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 20rpx; /* 减少与下方内容的距离（原30rpx） */
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.org-logo {
		width: 160rpx;
		height: 160rpx;
		margin-bottom: 15rpx; /* 减少logo与标题的距离 */
		border-radius: 8rpx;
	}

	.org-title {
		font-size: 36rpx;
		color: #333333;
		font-weight: bold;
		margin-bottom: 8rpx; /* 减少标题与描述的距离（原10rpx） */
	}

	.org-desc {
		font-size: 28rpx;
		color: #666666;
	}

	// 成员 section 样式
	.member-section {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 25rpx 30rpx; /* 减少section内边距（原30rpx） */
		margin-bottom: 20rpx; /* 减少section之间的距离（原30rpx） */
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx; /* 减少标题与列表的距离（原30rpx） */
	}

	.title-text {
		font-size: 32rpx;
		color: #007356;
		font-weight: bold;
		padding-right: 20rpx;
		background-color: #ffffff;
		z-index: 1;
	}

	.title-line {
		flex: 1;
		height: 1rpx;
		background-color: #e5e5e5;
		margin-left: -20rpx;
	}

	// 成员列表样式
	.member-list {
		padding-left: 20rpx;
	}

	.member-item {
		display: flex;
		align-items: center;
		padding: 15rpx 0; /* 减少列表项内边距（原18rpx 0） */
		border-bottom: 1rpx solid #f5f5f5;
	}

	.member-item:last-child {
		border-bottom: none;
	}

	.member-index {
		width: 40rpx;
		height: 40rpx;
		background-color: #007356;
		color: #ffffff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.member-info {
		flex: 1;
	}

	.member-name {
		font-size: 30rpx;
		color: #333333;
		line-height: 1.6;
	}

	// 网格布局样式
	.grid-list {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -10rpx;
	}

	.grid-item {
		width: 50%;
		padding: 0 10rpx;
		box-sizing: border-box;
	}
</style>